<template>
  <div class="app-container">
    <div class="tip">
      <p>正式使用后删除分类会导致与此分类关联的信息类别丢失，修改不会受影响</p>
      <p>删除顶级分类将会自动删除此分类下的子分类</p>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="addClassifyDialog = true"
        >添加</el-button
      >
      <el-button type="primary" size="small">保存</el-button>
    </div>
    <div class="category-table" style="margin-top: 20px">
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="分类名称" width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.name }} (ID:{{ scope.row.id }})</span>
          </template>
        </el-table-column>
        <el-table-column prop="alias" label="别名" width="180">
        </el-table-column>
        <el-table-column prop="order" label="排序" width="180">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.order"
              :min="0"
              :max="999"
              size="mini"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <el-button size="small" @click="addSubclassDialog=true"
              >此类下添加子类</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="editCategory(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteCategory(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addClassify :addClassifyDialog.sync="addClassifyDialog" />
    <editClassify :editClassifyDialog.sync="editClassifyDialog" />
    <addSubclass :addSubclassDialog.sync="addSubclassDialog" />
  </div>
</template>

<script>
import addClassify from "@/views/platformSystem/classifyConfig/positionClassify/components/addClassify";
import editClassify from "@/views/platformSystem/classifyConfig/positionClassify/components/editClassify";
import addSubclass from "@/views/platformSystem/classifyConfig/positionClassify/components/addSubclass";
export default {
  name: "HierarchicalCategoryTable",
  components: {
    addClassify,
    editClassify,
    addSubclass
  },
  data() {
    return {
      addClassifyDialog: false,
      editClassifyDialog: false,
      addSubclassDialog: false,
      tableData: [
        {
          id: 330206,
          name: "北仑",
          alias: "beilun",
          order: 999,
          children: [
            {
              id: 990101,
              name: "新碶",
              alias: "xin",
              order: 0,
            },
            {
              id: 990102,
              name: "小港",
              alias: "xiaogang",
              order: 0,
            },
            {
              id: 990103,
              name: "大碶",
              alias: "da",
              order: 0,
            },
            {
              id: 990104,
              name: "柴桥",
              alias: "chaiqiao",
              order: 0,
            },
            {
              id: 990105,
              name: "霞浦",
              alias: "xiapu",
              order: 0,
            },
            {
              id: 990106,
              name: "戚家山",
              alias: "qijiashan",
              order: 0,
            },
            {
              id: 990107,
              name: "春晓",
              alias: "chunxiao",
              order: 0,
            },
            {
              id: 990108,
              name: "梅山",
              alias: "meishan1",
              order: 0,
            },
            {
              id: 990109,
              name: "白峰",
              alias: "baifeng",
              order: 0,
            },
            {
              id: 990110,
              name: "郭巨",
              alias: "guoju",
              order: 0,
            },
            {
              id: 990111,
              name: "大榭",
              alias: "da1",
              order: 0,
            },
          ],
        },
        {
          id: 330200,
          name: "宁波",
          alias: "ningbo",
          order: 99,
          children: [],
        },
      ],
    };
  },
  methods: {
    editCategory(row) {
      this.editClassifyDialog = true;
      // Implement logic to edit category
    },
    deleteCategory(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // Implement logic to delete category
    },
  },
};
</script>

<style lang="scss" scoped>
.category-table {
  font-family: Arial, sans-serif;
}
.tip {
  padding: 8px 16px;
  background-color: #fdf6ec;
  border-radius: 4px;
  border-left: 5px solid #f9c77c;
  margin: 0 0 20px;
  p {
    font-size: 14px;
    color: #e6a23c;
    line-height: 1em;
  }
}
.btns {
  display: flex;
}
</style>
